<template>
	<view class="content">
		<view class="itemView flex-c-c">
			<view class="bloodWaveView flex-c-c">
				<view class="bloodWaveTitleView">
					<view class="bloodWaveTitleL flex-r-c">
						<image :src="staticUrl + '/image/report/dataInterpretation/icon_wave.png'" mode="widthFix">
						</image>
						<text>血流波形图</text>
					</view>
					<view class="bloodWaveTitleR flex-r-c">
						<view class="flex-r">
							<text>参考波形</text>
							<view class="legendLine" style="margin-left: 20rpx;background-color: #959595;"></view>
						</view>
						<view class="flex-r">
							<text>检测波形</text>
							<view class="legendLine" style="margin-left: 20rpx;background-color: #09ccb6;"></view>
						</view>
					</view>
				</view>
				<!-- Chart -->
				<view class="chartView">
					<qiun-data-charts type="tarea" :chartData="chartData" :ontouch="true" :optsWatch="false"
						:animation="false" :tooltipShow="false" :echartsApp="false" :canvas2d="true" canvasId="wsx" />
				</view>
			</view>
			<!-- 重博波明显性 -->
			<view class="dicroticView">
				<text class="dicroticViewT1">重搏波明显性</text>
				<text class="dicroticViewT2">【 {{dicroticType}} 】</text>
			</view>
			<!-- 波形弧度 -->
			<view class="angleView flex-c">
				<view class="angleTitle">
					<text>波形弧度</text>
				</view>
				<view class="angleItemView flex-c">
					<view class="flex-r-c">
						<view class="angleItem flex-r-c">
							<image class="angle1" :src="staticUrl + '/image/report/dataInterpretation/icon_angle1.png'"
								mode="widthFix"></image>
							<view class="angleItemText">
								<text class="angleItemText1">{{impWave.rc}}</text>
								<view>
									<text class="angleItemText2">上升角α弧度值</text>
									<text class="angleItemText3">(rc)</text>
								</view>
							</view>
						</view>

						<view class="angleItem flex-r-c" style="margin-left: 20rpx;">
							<image class="angle2" :src="staticUrl + '/image/report/dataInterpretation/icon_angle2.png'"
								mode="widthFix"></image>
							<view class="angleItemText">
								<text class="angleItemText1">{{impWave.rs}}</text>
								<view>
									<text class="angleItemText2">主峰角θ弧度值</text>
									<text class="angleItemText3">(rs)</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-r-c" style="margin-top: 15rpx;">
						<view class="angleItem flex-r-c">
							<image class="angle3" :src="staticUrl + '/image/report/dataInterpretation/icon_angle3.png'"
								mode="widthFix"></image>
							<view class="angleItemText">
								<text class="angleItemText1">{{impWave.ri}}</text>
								<view>
									<text class="angleItemText2">重搏角弧度值</text>
									<text class="angleItemText3">(ri)</text>
								</view>
							</view>
						</view>
						<view class="angleItem flex-r-c" style="margin-left: 20rpx;">
							<image class="angle4" :src="staticUrl + '/image/report/dataInterpretation/icon_angle4.png'"
								mode="widthFix"></image>
							<view class="angleItemText">
								<text class="angleItemText1">{{impWave.f}}</text>
								<view>
									<text class="angleItemText2">转折角F弧度值</text>
									<text class="angleItemText3">(F)</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 波幅 -->
			<view class="amplitudeView flex-c">
				<view class="amplitudeTitle">
					<text>波幅数据</text>
				</view>
				<view class="amplitudeCardView">
					<view class="amplitudeCardItem flex-c" style="margin-left: 30rpx;">
						<image :src="staticUrl + '/image/report/dataInterpretation/icon_board1.png'" mode="widthFix">
						</image>
						<text class="amplitudeCardText1">{{impWave.hs}}</text>
						<view>
							<text class="amplitudeCardText2">波幅</text>
							<text class="amplitudeCardText3">(hs)</text>
						</view>
					</view>

					<view class="amplitudeCardItem flex-c">
						<image :src="staticUrl + '/image/report/dataInterpretation/icon_board2.png'" mode="widthFix">
						</image>
						<text class="amplitudeCardText1">{{impWave.hb}}</text>
						<view>
							<text class="amplitudeCardText2">转折高</text>
							<text class="amplitudeCardText3">(hb)</text>
						</view>
					</view>

					<view class="amplitudeCardItem flex-c" style="margin-right: 30rpx;">
						<image :src="staticUrl + '/image/report/dataInterpretation/icon_board3.png'" mode="widthFix">
						</image>
						<text class="amplitudeCardText1">{{impWave.fbs}}</text>
						<view>
							<text class="amplitudeCardText2">转折高比值</text>
							<text class="amplitudeCardText3">(Fbs)</text>
						</view>
					</view>
				</view>
				<!-- 具体参数 -->
				<view class="amplitudeParaView bloodWaveTitleView">
					<!-- L -->
					<view class="flex-c" style="margin-top: 37rpx;">
						<view class="flex-c">
							<text class="amplitudeParaText1">{{impWave.vs}}</text>
							<view>
								<text class="amplitudeParaText2">流入容积速度</text>
								<text class="amplitudeParaText3">(vs)</text>
							</view>
						</view>
						<view class="amplitudeParaItem flex-c">
							<text class="amplitudeParaText1">{{impWave.t}}</text>
							<view>
								<text class="amplitudeParaText2">脉搏波动时间</text>
								<text class="amplitudeParaText3">(T)</text>
							</view>
						</view>
						<view class="amplitudeParaItem flex-c">
							<text class="amplitudeParaText1">{{impWave.ts}}</text>
							<view>
								<text class="amplitudeParaText2">收缩波时间</text>
								<text class="amplitudeParaText3">(ti)</text>
							</view>
						</view>
					</view>
					<!-- R -->
					<view class="flex-c" style="margin-top: 37rpx;">
						<view class="flex-c">
							<text class="amplitudeParaText1">{{impWave.vg}}</text>
							<view>
								<text class="amplitudeParaText2">最大流入容积速度</text>
								<text class="amplitudeParaText3">(vg)</text>
							</view>
						</view>
						<view class="amplitudeParaItem flex-c">
							<text class="amplitudeParaText1">{{impWave.ts}}</text>
							<view>
								<text class="amplitudeParaText2">上升时间</text>
								<text class="amplitudeParaText3">(ts)</text>
							</view>
						</view>
						<view class="amplitudeParaItem flex-c">
							<text class="amplitudeParaText1">{{impWave.tf}}</text>
							<view>
								<text class="amplitudeParaText2">转折时间</text>
								<text class="amplitudeParaText3">(tf)</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!----------------  各项测定依据  -------------->
		<view class="itemView flex-c">
			<view class="itemTitleView">
				<view class="itemTitleL">
					<view class="itemTitleTips" :style="{ background: bloodAgeColor }"></view>
					<text class="itemTitle">血管年龄测定依据</text>
				</view>
				<view class="itemTitleR" :style="{ background: bloodAgeColor }">
					<text class="itemTitleRT1">{{ageDiff}}</text>
					<text class="itemTitleRT2">岁</text>
				</view>
			</view>
			<!-- 依据项 -->
			<view class="accordItem" v-for="(item,index) in bloodAgeAccord" :key="index" style="margin-top: 20rpx;">
				<view class="accordL">
					<text class="accordLT1">{{item.name}}</text>
					<text class="accordLT2">{{item.unit}}</text>
				</view>
				<view class="accordR flex-c">
					<text class="accordRT1" :style="{ color: item.color }">{{item.value == null?'--':item.value}}</text>
					<text class="accordRT2">{{item.symbol}}{{item.referVal}}</text>
				</view>
			</view>
		</view>
		<!-- 血管弹性 依据 -->
		<view class="itemView flex-c">
			<view class="itemTitleView">
				<view class="itemTitleL">
					<view class="itemTitleTips" :style="{ background: bloodElasticityColor }"></view>
					<text class="itemTitle">血管弹性测定依据</text>
				</view>
				<view class="itemTitleR" :style="{ background: bloodElasticityColor }">
					<text class="itemTitleRT1">{{report.hardScore}}</text>
				</view>
			</view>
			<!-- 依据项 -->
			<view class="accordItem" v-for="(item,index) in bloodElasticityAccord" :key="index"
				style="margin-top: 20rpx;">
				<view class="accordL">
					<text class="accordLT1">{{item.name}}</text>
					<text class="accordLT2">{{item.unit}}</text>
				</view>
				<view class="accordR flex-c">
					<text class="accordRT1" :style="{ color: item.color }">{{item.value == null?'--':item.value}}</text>
					<text class="accordRT2">{{item.symbol}}{{item.referVal}}</text>
				</view>
			</view>
		</view>

		<!-- 血流调节 依据 -->
		<view class="itemView flex-c">
			<view class="itemTitleView">
				<view class="itemTitleL">
					<view class="itemTitleTips" :style="{ background: bloodAdjustColor }"></view>
					<text class="itemTitle">血流调节测定依据</text>
				</view>
				<view class="itemTitleR" :style="{ background: bloodAdjustColor }">
					<text class="itemTitleRT1">{{report.adjustScore}}</text>
				</view>
			</view>
			<!-- 依据项 -->
			<view class="accordItem" v-for="(item,index) in bloodAdjustAccord" :key="index" style="margin-top: 20rpx;">
				<view class="accordL">
					<text class="accordLT1">{{item.name}}</text>
					<text class="accordLT2">{{item.unit}}</text>
				</view>
				<view class="accordR flex-c">
					<text class="accordRT1" :style="{ color: item.color }">{{item.value == null?'--':item.value}}</text>
					<text v-if="index == 2" class="accordRT2">{{item.referVal[0]}} ~ {{item.referVal[1]}}</text>
					<text v-else class="accordRT2">{{item.symbol}}{{item.referVal}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/login';
	import config from '../../../../config';
	const SCORELEVEL = config.SCORELEVEL
	export default {
		data() {
			return {
				report: null,
				sex: '男',
				staticUrl: this.$config.StaticUrl,
				impWave: {}, //
				dataWave: [], //波形数据
				dicroticType: '隐约',
				bloodAgeColor: '#01B09A',
				bloodElasticityColor: '#01B09A',
				bloodAdjustColor: '#01B09A',
				headhealthColor: '#01B09A',
				ageDiff: 0,
				bloodAgeAccord: [{
						name: '上升时间',
						referVal: 0.22,
						unit: '(ts)',
						value: 0,
						symbol: '≤',
						color: '#333333' //#FF4D4D
					},
					{
						name: '转折高比值',
						referVal: 0.5,
						unit: '(fbs)',
						value: 0,
						symbol: '≥',
						color: '#333333' //#FF4D4D
					},
					{
						name: '主峰角',
						referVal: 1.8,
						unit: '(rs)',
						value: 0,
						symbol: '≤',
						color: '#333333' //#FF4D4D
					},
				],
				//血管弹性
				bloodElasticityAccord: [{
						name: '上升时间',
						referVal: 0.22,
						unit: '(ts)',
						value: 0,
						symbol: '≤',
						color: '#333333' //#FF4D4D
					},
					{
						name: '转折高比值',
						referVal: 0.5,
						unit: '(fbs)',
						value: 0,
						symbol: '≥',
						color: '#333333' //#FF4D4D
					},
					{
						name: '重搏波角度',
						referVal: 3.0,
						unit: '(ri)',
						value: 0,
						symbol: '≤',
						color: '#333333' //#FF4D4D
					},
				],
				//血流调节
				bloodAdjustAccord: [{
						name: '波幅',
						referVal: 0.08,
						unit: '(hs)',
						value: 0,
						symbol: '≥',
						color: '#333333' //#FF4D4D
					}, {
						name: '流出阻力系数',
						referVal: 0.9,
						unit: '(fis)',
						value: 0,
						symbol: '≤',
						color: '#333333' //#FF4D4D  #333333;
					},
					{
						name: '对称系数',
						referVal: [0.8, 1.2],
						unit: '(symFactor)',
						value: 0,
						symbol: '',
						color: '#333333' //#FF4D4D #01B09A
					},
				],
				evaluations: {},
				chartData: {
					categories: [],
					series: [{
							data: [],
							color: '#09c8b2'
						},
						{
							data: [],
							color: '#AAAAAA'
						}
					]
				},
			}
		},
		onLoad(option) {
			console.log('option>>>', option);
			if (option.report != null && option.report != 'undefined') {
				let _report = JSON.parse(option.report)
				this.report = _report;
				this.getImpWaveByReportId(_report.reportId);
				//弹性
				if (_report.hardScore < SCORELEVEL[0]) {
					this.bloodElasticityColor = '#E43241';
				} else if (_report.hardScore < SCORELEVEL[1]) {
					this.bloodElasticityColor = '#E2732F';
				} else if (_report.hardScore < SCORELEVEL[2]) {
					this.bloodElasticityColor = '#E9AA2F';
				} else if (_report.hardScore < SCORELEVEL[3]) {
					this.bloodElasticityColor = '#99CC48';
				}
				// 血流调节
				if (_report.adjustScore < SCORELEVEL[0]) {
					this.bloodAdjustColor = '#E43241';
				} else if (_report.adjustScore < SCORELEVEL[1]) {
					this.bloodAdjustColor = '#E2732F';
				} else if (_report.adjustScore < SCORELEVEL[2]) {
					this.bloodAdjustColor = '#E9AA2F';
				} else if (_report.adjustScore < SCORELEVEL[3]) {
					this.bloodAdjustColor = '#99CC48';
				}
				this.sex = this.$store.state.userBaseInfo.sex
				let userAge = this.$utils.getAge(this.$store.state.userBaseInfo.birthday)
				let _ageDiff = parseInt((_report.minVascularAge + _report.maxVascularAge) / 2) - userAge

				this.ageDiff = _ageDiff > 0 ? '+' + (_ageDiff) : (_ageDiff == 0 ? '±' + _ageDiff : _ageDiff)
				if (_ageDiff > 15) {
					this.bloodAgeColor = '#E43241';
				} else if (_ageDiff > 5 && _ageDiff <= 15) {
					this.bloodAgeColor = '#E9AA2F';
				}
			}
		},
		methods: {
			getImpWaveByReportId(reportId) {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					action: 'getImpWave',
					params: reportId
				};
				api.getImpWaveByReportId(data).then(function(res) {
					console.log('getImpWaveByReportId success', res);
					if (res.data.success) {
						that.impWave = res.data.data.parameter
						that.putValue(res.data.data.parameter)
						that.getRegReportEvaluationByReportId(reportId)
					} else {
						that.$toast('暂无数据解读!');
						let t = setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
							clearTimeout(t);
						}, 1000)
					}
				}).catch(function(error) {
					console.log('getImpWaveByReportId fail', error);
				});
			},
			putValue(res) {
				this.dicroticType = res.diacritic == 0 ? '明显' : (res.diacritic == 1 ? '隐约' : '消失')

				this.bloodAgeAccord[0].value = res.ts;
				this.bloodAgeAccord[1].value = res.fbs;
				this.bloodAgeAccord[2].value = res.rs;

				this.bloodElasticityAccord[0].value = res.ts;
				this.bloodElasticityAccord[1].value = res.fbs;
				this.bloodElasticityAccord[2].value = res.ri;

				this.bloodAdjustAccord[0].value = res.hs;
				this.bloodAdjustAccord[1].value = res.fis;
				this.bloodAdjustAccord[2].value = res.baseImpSymFactor;

				if (res.impWave != null) {
					let d1 = res.impWave.split(',');
					let d1Max, d1Min;
					d1.forEach((item, index) => {
						item = parseFloat(item);
						// 计算极大值
						if (index == 0) {
							d1Max = item;
							d1Min = item;
						}
						if (item > d1Max) d1Max = item;
						if (item < d1Min) d1Min = item;
					});
					// 添加标准数据  男女两个对象  分别存放 8个数组 ，得到年龄之后 取整减2获取数组下标   parseInt(age / 10) -2
					this.getReferWave(d1, d1Max, d1Min);
				}
			},
			// 找到 两个数组的极大值 ，求商（大/小）
			getReferWave(data, max1, min1) {
				let data1 = [];
				if (min1 < 0) {
					let diff = 0 - min1;
					data.forEach((item) => {
						data1.push(parseFloat(item) + diff);
					})
					data[0] = 0;
					data1[data1.length - 1] = 0;
				} else {
					data1 = data;
				}
				let referData, max2;
				if (this.sex == '男') {
					referData = this.$config.MANWAVE;
				} else {
					referData = this.$config.WOMANWAVE;
				}
				referData.forEach((item, index) => {
					// 取出极大值
					if (index == 0) max2 = item;
					if (item > max2) max2 = item;
				});
				let val1 = 1;
				let val2 = 1;
				if (max1 > max2) {
					val1 = max1 / max2;
				} else if (max1 < max2) {
					val2 = max2 / max1;
				}
				let len1 = data1.length
				let len2 = referData.length
				let xData = []
				if (len1 > len2) {
					for (let i = 0; i < len1; i++) {
						xData.push(i)
					}
				} else {
					for (let i = 0; i < len2; i++) {
						xData.push(i)
					}
				}
				this.chartData.categories = JSON.parse(JSON.stringify(xData))

				data1.forEach((item, index) => {
					this.chartData.series[0].data.push(item * val2);
				});
				referData.forEach((item, index) => {
					this.chartData.series[1].data.push(item * val1);
				});
			},
			//获取参考值和解读文本
			getRegReportEvaluationByReportId(reportId) {
				let that = this;
				let data = {
					userId: this.$store.state.userInfo.currentUser.userId,
					action: '',
					params: reportId
				};
				api.getRegReportEvaluationByReportId(data).then(function(res) {
					console.log('getRegReportEvaluationByReportId success', res);
					if (res.data.success) {
						if (res.data.data.evaluation != null) {
							let _evaluation = res.data.data.evaluation
							that.evaluations = _evaluation
							//血管年龄
							that.bloodAgeAccord[0].referVal = _evaluation.tsMax
							that.bloodAgeAccord[1].referVal = _evaluation.fbsMin
							that.bloodAgeAccord[2].referVal = _evaluation.rsMax
							if (that.impWave.ts != null && that.impWave.ts > _evaluation.tsMax) that
								.bloodAgeAccord[0].color = '#FF4D4D';
							if (that.impWave.fbs < _evaluation.fbsMin) that.bloodAgeAccord[1].color = '#FF4D4D';
							if (that.impWave.rs != null && that.impWave.rs > _evaluation.rsMax) that.bloodAgeAccord[2].color = '#FF4D4D';

							that.bloodElasticityAccord[0].referVal = _evaluation.tsMax
							that.bloodElasticityAccord[1].referVal = _evaluation.fbsMin
							that.bloodElasticityAccord[2].referVal = _evaluation.riMax
							if (that.impWave.ts > _evaluation.tsMax) that.bloodElasticityAccord[0].color = '#FF4D4D'
							if (that.impWave.fbs < _evaluation.fbsMin) that.bloodElasticityAccord[1].color = '#FF4D4D'
							if (that.impWave.ri > _evaluation.riMax) that.bloodElasticityAccord[2].color = '#FF4D4D'

							that.bloodAdjustAccord[0].referVal = _evaluation.hsMin
							that.bloodAdjustAccord[1].referVal = _evaluation.fisMax
							that.bloodAdjustAccord[2].referVal = [_evaluation.baseSymFactorMin, _evaluation .baseSymFactorMax]
							if (that.impWave.hs < _evaluation.hsMin) that.bloodAdjustAccord[0].color = '#FF4D4D'
							if (that.impWave.fis > _evaluation.fisMax) that.bloodAdjustAccord[1].color = '#FF4D4D'
							if (that.impWave.baseImpSymFactor < _evaluation.baseSymFactorMin || that.impWave
								.baseImpSymFactor > _evaluation.baseSymFactorMax) that.bloodAdjustAccord[2].color =
								'#FF4D4D'
						}
					}
				}).catch(function(error) {
					console.log('getRegReportEvaluationByReportId fail', error);
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	/* common css */
	.flex-c-c {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.flex-r-c {
		display: flex;
		align-items: center;
	}

	.content,
	.flex-c {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.itemView {
		margin-top: 18rpx;
		width: 700rpx;
		background-color: white;
		border-radius: 10px;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.flex-r {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itemTitleView {
		width: 600rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bloodWaveView {
		width: 635rpx;
	}

	.bloodWaveTitleView {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bloodWaveTitleL image {
		width: 51rpx;
	}

	.bloodWaveTitleL text {
		margin-left: 12rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.bloodWaveTitleR {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.bloodWaveTitleR text {
		/* margin-left: 10rpx; */
		font-size: 20rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #919191;
	}

	.legendLine {
		width: 50rpx;
		height: 5rpx;
		border-radius: 5px;
	}

	.chartView {
		margin-top: 45rpx;
		width: 567rpx;
		height: 262rpx;
	}

	/* 重搏波 */
	.dicroticView {
		margin-top: 50rpx;
		width: 634rpx;
		height: 85rpx;
		border: #01B099 1px solid;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dicroticViewT1 {
		margin-left: 26rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.dicroticViewT2 {
		margin-right: 31rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #01B09A;
	}

	/* 波形弧度 */
	.angleView {
		margin-top: 44rpx;
		width: 634rpx;
	}

	.angleTitle,
	.amplitudeTitle {
		width: 100%;
	}

	.angleTitle text,
	.amplitudeTitle text {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.angleItemView {
		margin-top: 24rpx;
		width: 580rpx;
	}

	.angleItem {
		width: 280rpx;
		height: 166rpx;
		background-color: #F2F2F2;
		border-radius: 10px;
	}

	.angle1,
	.angle2 {
		margin-left: 25rpx;
		width: 49rpx;
	}

	.angle3 {
		margin-left: 31rpx;
		width: 35rpx;
	}

	.angle4 {
		margin-left: 34rpx;
		width: 37rpx;
	}

	.angleItemText {
		margin-left: 18rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.angleItemText1 {
		font-size: 32rpx;
		font-family: MiSans;
		font-weight: bold;
		color: #333333;
		/* line-height: 10%; */
	}

	.angleItemText2 {
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #666666;
		/* line-height: 10%; */
	}

	.angleItemText3 {
		font-size: 14rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #666666;
		/* line-height: normal; */
	}

	/* 波幅 */
	.amplitudeView {
		margin-top: 44rpx;
		width: 634rpx;
	}

	.amplitudeCardView {
		margin-top: 26rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.amplitudeCardItem {
		width: 181rpx;
		height: 238rpx;
		background-color: #01B099;
		border-radius: 15px;
	}

	.amplitudeCardItem image {
		width: 60rpx;
	}

	.amplitudeCardText1 {
		margin: 10rpx;
		font-size: 35rpx;
		font-family: MiSans;
		font-weight: bolder;
		color: #FFFFFF;
	}

	.amplitudeCardText2 {
		font-size: 25rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #FFFFFF;
	}

	.amplitudeCardText3 {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #FFFFFF;
	}

	.amplitudeParaView {
		margin-top: 37rpx;
		width: 500rpx;
	}

	.amplitudeParaItem {
		margin-top: 50rpx;
	}

	.amplitudeParaText1 {
		font-size: 35rpx;
		font-family: MiSans;
		font-weight: bolder;
		color: #333333;
	}

	.amplitudeParaText2 {
		font-size: 25rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #666666;
	}

	.amplitudeParaText3 {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #666666;
	}

	/* Item  依据 */
	.itemTitleL {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itemTitleTips {
		width: 8rpx;
		height: 32rpx;
	}

	.itemTitle {
		margin-left: 15rpx;
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #333333;
	}

	.itemTitleR {
		padding: 10rpx 30rpx;
		border-radius: 50px;
		background-color: #01B09A;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.itemTitleRT1 {
		font-size: 34rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.itemTitleRT2 {
		margin-left: 10rpx;
		font-size: 20rpx;
		font-family: Source Han Sans SC;
		font-weight: normal;
		color: #FFFFFF;
	}

	.accordItem {
		margin-top: 10rpx;
		width: 606rpx;
		height: 114rpx;
		background-color: #F2FBFA;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.accordL {
		margin-left: 36rpx;
	}

	.accordR {
		margin-right: 30rpx;
		width: 150rpx;
		/* background-color: beige; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.accordLT1 {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.accordLT2 {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: normal;
		color: #333333;
	}

	.accordRT1 {
		font-size: 32rpx;
		font-family: MiSans;
		font-weight: bold;
		color: #333333;
	}

	.accordRT2 {
		font-size: 22rpx;
		font-family: MiSans;
		font-weight: normal;
		color: #666666;
	}
</style>